<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Treeview - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        #tv .current::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            background: lightcyan;
            height: 24px;
            top: 0;
            right: 0;
            bottom: 0;
        }

        #tv > li > ul > li > ul > .current::before {
            left: -56px;
        }

        #tv > li > ul > .current::before {
            left: -40px;
        }

        #tv > .current::before {
            left: -24px;
        }
    </style>
</head>
<body class="m4-cloak">
<div class="container">
    <h1>Treeview test page</h1>
    <div class="example">
        <ul data-role="treeview" class="border" id="tv">
            <li class="w-100 expanded">
                <div class="d-flex flex-align-center">
                    <input id="1" type="text" data-role="materialinput" value="item 11111">
                    <a id="btmMore-1" class="button">
                        <span class="mif-more-horiz"></span>
                    </a>
                    <ul class="d-menu context drop-down-right" data-role="dropdown" data-toggle-element="#btmMore-1">
                        <li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Photo</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="mif-target icon"></span> Location</a></li>
                    </ul>
                </div>
            </li>
            <li class="w-100 expanded">
                <div class="d-flex flex-align-center">
                    <input id="2" type="text" data-role="materialinput" value="item 22222">
                    <a id="btmMore-2" class="button">
                        <span class="mif-more-horiz"></span>
                    </a>
                    <ul class="d-menu context drop-down-right" data-role="dropdown" data-toggle-element="#btmMore-2">
                        <li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Photo</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="mif-target icon"></span> Location</a></li>
                    </ul>
                </div>
            </li>
            <li data-icon="<span class='mif-star-full fg-red'></span>" data-caption="Favorites">
                <ul>
                    <li data-icon="<span class='mif-library fg-green'></span>" data-caption="Projects"></li>
                    <li data-icon="<span class='mif-download fg-cyan'></span>" data-caption="Downloads"></li>
                    <li data-icon="<span class='mif-apps'></span>" data-caption="Desktop"></li>
                </ul>
            </li>
            <li data-icon="<span class='mif-onedrive'></span>" data-caption="OneDrive">
                <ul>
                    <li data-caption="Documents"></li>
                    <li data-caption="Projects" data-collapsed="true">
                        <ul>
                            <li data-caption="Web"></li>
                            <li data-caption="Android"></li>
                            <li data-caption="Windows"></li>
                            <li data-caption="iOS"></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <br>

    <div class="example">
        <ul data-role="treeview" id="tv1">
            <li>
                <input type="checkbox" data-role="checkbox" data-caption="Play video" title="">
                <ul>
                    <li><input type="checkbox" data-role="checkbox" data-caption="AVI" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-caption="MPEG" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-caption="VIDX" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-caption="MP4" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-caption="XVID" title=""></li>
                </ul>
            </li>
            <li><input type="checkbox" data-role="checkbox" data-caption="Play audio" title=""></li>
            <li>
                <input type="checkbox" data-role="checkbox" data-caption="Subtitles" title="">
                <ul>
                    <li><input type="checkbox" data-role="checkbox" data-caption="English" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-caption="Ukrainian" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-caption="Dutch" title=""></li>
                </ul>
            </li>
        </ul>
    </div>

</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    $(function(){
        var elements = $("#tv1").find("input[type=checkbox]").filter(function(el){
            return el.checked;
        });

        console.log(elements);
    })
</script>
</body>
</html>
